<template>
  <div class="main">

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="请输入快递运单号">
        <el-input v-model="trackingNum" placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="mapContainer">
      <div class="infoBar">
        <div class="trackingNumBar">
          运单号:
          <span style="color: #615a63">{{trackingNum_afterQuery}}</span>
        </div>
        <div class="trackingRoute">
          {{mainData && mainData.startAddress}}
          <i class="el-icon-right" style="padding: 0 30px;font-size: 20px;color: #99a9bf"/>
          {{mainData && mainData.endAddress}}
        </div>
      </div>
      <map-position :points="points" class="mapPosition"/>
    </div>
    <div class="showContainer">
<!--      <ul class="route">-->
<!--        <li class="status">已收件</li>-->
<!--        <li class="icon"><i class="el-icon-location-outline" style="font-size: 28px;color:#c31313"></i></li>-->
<!--        <li v-if="mainData" class="date-time">{{mainData.createTime}}</li>-->
<!--        <li class="desc">快件已从{{mainData && mainData.startAddress}}揽收，寄件人是{{mainData && mainData.customerId}}</li>-->
<!--      </ul>-->
      <ul v-for="item in routes" class="route">
        <li class="status">{{item.status}}</li>
        <li class="icon"><i class="el-icon-location-outline"></i></li>
        <li v-if="routes" class="date-time">{{item.time}}</li>
        <li class="desc">
          <span v-if="routes" style="line-height: 14px">{{item.info}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>


<script>

  import mapPosition from "./mapPosition";
  import {require} from "../network/require";

  export default {
    name: 'HelloWorld',
    components: {
      mapPosition
    },
    props: {
      msg: String
    },
    data() {
      return {
        mainData: null,
        routes: [],
        points: [
          {
            longitude: 114.495266,
            latitude: 22.526343
          },
          {
            longitude: 113.367531,
            latitude: 23.152134
          }
        ],
        trackingNum: 1,
        trackingNum_afterQuery: 1,
      }
    },
    created() {
      // require(this.trackingNum).then(res => {
      //     // console.log(res);
      //     this.mainData = res.data;
      //     console.log(this.mainData);
      //   }
      // );

    },
    mounted() {
      this.queryData(1);
    },
    methods: {
      onSubmit() {
        // require(this.trackingNum).then(res => {
        //   this.mainData = res.data;
        // })
        // this.trackingNum_afterQuery = this.trackingNum;
        this.queryData(this.trackingNum);
        this.trackingNum_afterQuery = this.trackingNum;
      },
      async queryData(packageID) {
        try {
          const res = await require(packageID);
          // console.log(res.data);
          const data = res.data;
          this.routes = data.trace;
        } catch (e) {
          console.log(e);
        }
      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  * {
    margin: 0;
    padding: 0;
    font-family: "Source Han Sans", "微软雅黑", "microsoft yahei", "HanHei SC", PingHei, "PingFang SC", sans-serif;
  }

  li {
    list-style: none;
  }

  .main {
    margin: 25px auto;
    width: 800px;
    height: 768px;
  }

  .mapContainer {
    position: relative;
    height: 354px;
    width: 800px;

  }

  .mapContainer .infoBar {
    position: absolute;
    top: 10px;
    left: 70px;
    height: 72px;
    width: 608px;
    padding: 6px 26px;
    background-color: #fff;
    opacity: .9;
    z-index: 999;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2)
  }

  .mapContainer .infoBar .trackingNumBar {
    height: 17px;
    padding-bottom: 3px;
    margin-top: 10px;
    color: #9999;
    font-size: 12px;
  }

  .mapContainer .infoBar .trackingRoute {
    height: 30px;
    margin-top: 12px;
    font-weight: 600;
  }

  .mapContainer .mapPosition {
    position: absolute;
    top: 0;
  }

  .showContainer {
    width: 800px;
    height: 280px;
    margin: 25px 0;
    /*background-color: #ff7cf7;*/
    /*overflow-y: auto;*/
  }

  .showContainer ul {
    height: 38px;
    width: 796px;
    margin-top: 10px;
    line-height: 38px;
    /*background-color: #615a63;*/

  }

  .route li {
    /*background-color: #a05b5b;*/
  }

  .route .status {
    text-align: right;
    float: left;
    width: 80px;
    height: 20px;
    font-size: 14px;
  }

  .route .icon {
    text-align: center;
    float: left;
    width: 80px;
    height: 28px;
  }

  .route .date-time {
    float: left;
    width: 199px;
    height: 19px;
    font-size: 16px;
  }

  .route .desc {
    /*overflow: hidden;*/
    text-align: left;
    float: right;
    width: 425px;
    max-height: 38px;
    /*font-size: 11px;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
  }




</style>
